<template>
	<div id='AandB'>
    <v-header title="A/B测试" :showDownloadBtn='false' :saveShow='false'></v-header>
		<div class='AandB-tab' ref='tabHeight'>
      <div style='background:#fff;height:100%;overflow: auto;'>
        <ul>
          <li @click='tabLi(index)' v-for='(item,index) in liTitle' :key="item.id" :class='[index==ind?"liActive":""]'>{{item}}</li>
          <div v-if='ind==0' class='li-search'>
          <i class='el-icon-search' style='margin:0 11px'></i>
          <input type="text" placeholder="请在此搜索" class='search-ipt'>
          </div>
        </ul>
        <div style='padding:0 20px'>
          <tab-first :is="currentView" keep-alive></tab-first>
        </div>
    </div>
    </div>
	</div>
</template>

<script type="text/ecmascript-6">
  import { VEditstep, VHeader } from '../../../../components'
  import TabFirst from '../tabsComp/AandBTabel'
  import TabSecond from '../tabsComp/VisualEditing'
  import TabThird from '../tabsComp/resultAnalyse'
  export default {
    components: {
      VEditstep,
      VHeader,
      TabFirst,
      TabSecond,
      TabThird
    },
    data () {
      return {
        ind: 0,
        liTitle: ['实验列表', '可视化编辑', '结果分析'],
        currentView: 'TabFirst'
      }
    },
    created () {
      this.$nextTick(() => {
        this.$refs.tabHeight.style.height = window.innerHeight - 60 + 'px'
      })
    },
    methods: {
        tabLi (index) {
          this.ind = index
          this.ind = index
          if (this.ind === 0) {
            this.currentView = 'TabFirst'
          } else if (this.ind === 1) {
             this.currentView = 'TabSecond'
          } else if (this.ind === 2) {
              this.currentView = 'TabThird'
          }
        }
      }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .AandB-tab
    padding 10px
    width 100%
    ul
      width 100%
      height 50px
      background #016DFB
      display flex
      align-items center
      padding 0 20px
      position relative;
      li
        color #fff
        font-size 14px
        display flex
        justify-content center
        margin-top 10px
        padding 0 20px
        cursor pointer
      .liActive
        background #fff
        height 40px
        line-height 40px
        color #016DFB
        margin-top 10px
        border-radius 4px 4px 0 0
    .li-search
      border 1px solid #D8DCE5
      background #fff
      display flex
      align-items center
      width 240px
      height 30px
      border-radius 4px
      position absolute
      right 20px
      top 50%
      margin-top -15px
    .search-ipt
      border none
      font-size 12px
</style>
